<template>
  <el-dropdown placement="top" :hide-on-click="false" @command="switchRoutes">
    <span class="el-dropdown-link">
      <nuxt-link to="/footprint">足迹</nuxt-link>
    </span>
    <el-dropdown-menu slot="dropdown" class="footprint">
      <div class="link">
        <el-dropdown-item command="history">
          <span>历史</span>
        </el-dropdown-item>
        <el-dropdown-item command="mark" class="link-mark">
          <span>收藏</span>
          <span>{{userMark.length}}</span>
        </el-dropdown-item>
      </div>
      <div class="content">
        <el-scrollbar :style="flag?'height: calc(100% - 40px)':'height: calc(100% - 40px)'">
          <el-dropdown-item v-for="route in (flag?userHistory:userMark)" :key="route.path">
            <a :href="route.path">
              <el-tag effect="plain">{{route.meta.tag}}</el-tag>
              {{route.meta.title}}
            </a>
          </el-dropdown-item>
        </el-scrollbar>
        <a v-if="flag" class="content-more" href="/history">查看更多 ></a>
      </div>
    </el-dropdown-menu>
  </el-dropdown>
</template>

<script lang='ts'>
import { Component, Vue } from "nuxt-property-decorator";

@Component
export default class extends Vue {
  flag: boolean = true;
  get userHistory() {
    return this.$store.state.navModule.userHistory;
  }
  get userMark() {
    return this.$store.state.navModule.userMark;
  }

  //左侧列表绑定command事件，点击切换列表内容
  switchRoutes(e: string) {
    if (e == "history") {
      this.flag = true;
    } else if (e == "mark") {
      this.flag = false;
    }
  }
}
</script>

<style lang='less' scoped>
a {
  .wh(auto, 48px);
  padding-left: 15px;
  padding-right: 15px;
  display: inline-block;
  line-height: 48px;
  color: #222;
  &:hover {
    text-decoration: none;
  }
}
.footprint {
  .wh(500px, 480px);
  .flex-box(row);
  .link {
    .wh(30%, 100%);
    .link-mark {
      .flex-box(row, space-between);
    }
  }
  .content {
    .wh(70%, 100%);
    overflow-x: hidden;
    a {
      .wh(100%, auto);
      display: block;
      line-height: unset;
    }
    .content-more {
      .wh(100%, 40px);
      .flex-box(row);
      color: #999aaa;
      &:hover {
        color: #fc5531;
      }
    }
  }
}
::v-deep(.el-scrollbar__wrap) {
  overflow-x: hidden;
  overflow-y: auto;
}
.el-tag {
  .wh(auto, 20px);
  padding: 0 4px;
  margin-right: 5px;
  line-height: 18px;
}
</style>